<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '保存到相册并分享', navigationStyle: 'custom' },
}
</route>
<template>
  <view class="share-page">
    <view class="fixed-bg"></view>
    <view class="share-page__content" ref="contentRef">
      <view class="mb-[24rpx] text-[#191C23]">全国优质实习就业机会一网打尽！</view>
      <view class="share-page__content__banner mb-[60rpx]">
        <image src="@/pages-sub/static/share.png" mode="scaleToFill" class="h-[360rpx] block" />
        <view class="share-page__content__banner--text">
          <wd-divider color="#0092FE">海量职位 实时更新</wd-divider>
        </view>
      </view>
      <view class="share-page__content--job-code flex items-center gap-3">
        <image :src="userInfo.avatar" mode="scaleToFill" />
        <view class="flex flex-col justify-between flex-1">
          <text class="text-[32rpx] text-[#26292C] font-bold mb-2">{{ userInfo.nickname }}</text>
          <text class="text-[28rpx] text-[rgba(62,70,84,0.55)]">邀您一起查看求职信息！</text>
        </view>
        <view class="w-[112rpx] h-112rpx"></view>
      </view>
      <wd-divider custom-class="!mt-[60rpx] block " color="rgba(62,70,84,0.09)" />

      <view class="share-page__content--class mt-[60rpx]">
        <view class="flex flex-col">
          <text class="text-[32rpx] text-[#26292C] font-bold mb-2">咨询央国企上岸课程</text>
          <text class="text-[rgba(62,70,84,0.55)] text-[28rpx]">长按识别二维码，了解更多课程</text>
        </view>
        <view class="qr-code">
          <image
            :src="`${baseUlr}/admin-api/infra/file/4/get/c7c776423c728604f41a6951e62c8de1588893ed88447374e4809c9e95933f2b.jpg`"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <c-button custom-class="block w-full" @click="saveToAlbum">保存到相册</c-button>
    <!-- 隐藏的 canvas -->
    <zs-canvas
      @ready="onCreateCanvasContext"
      :style="{
        position: 'absolute',
        top: '999999rpx',
        left: '999999rpx',
        width: `${686 * scale}rpx`,
        height: `${880 * scale}rpx`,
      }"
      :is-use="true"
    ></zs-canvas>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  import { getEnvBaseUrl } from '@/utils';

  import bk from '@/pages-sub/static/bk.png';

  const contentRef = ref(null);

  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore);
  const baseUlr = getEnvBaseUrl();
  let myCanvas = null;

  const scale = ref(2);
  const onCreateCanvasContext = (e) => {
    const { zs, canvas, context: ctx } = e;
    const { width, height } = canvas;
    myCanvas = zs;

    ctx.drawImage(bk, 0, 0, width, height);
    ctx.save();
    // 把avatar头像裁成圆形
    ctx.beginPath();
    ctx.arc((20 + 28) * scale.value, (258 + 28) * scale.value, 28 * scale.value, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(
      userInfo.value.avatar,
      20 * scale.value,
      258 * scale.value,
      56 * scale.value,
      56 * scale.value,
    );
    ctx.restore();

    ctx.fillStyle = '#26292C';
    ctx.font = `${16 * scale.value}px Arial bold`;
    const name = userInfo.value.nickname;
    let textWidth = 16 * name.length * scale.value;
    ctx.fillText(name, 96 * scale.value, 278 * scale.value, textWidth);
    ctx.fillText('咨询央国企上岸课程', 20 * scale.value, height - 71 * scale.value);

    ctx.fillStyle = 'rgba(62,70,84,0.55)';
    ctx.font = `${14 * scale.value}px Arial`;
    ctx.fillText('邀您一起查看求职信息！', 96 * scale.value, 305 * scale.value);
    ctx.fillText('长按识别二维码，了解更多课程', 20 * scale.value, height - 33 * scale.value);

    ctx.drawImage(
      `${baseUlr}/admin-api/infra/file/4/get/c7c776423c728604f41a6951e62c8de1588893ed88447374e4809c9e95933f2b.jpg`,
      width - (20 + 56) * scale.value,
      height - (30 + 56) * scale.value,
      56 * scale.value,
      56 * scale.value,
    );

    ctx.draw(true);
  };

  const saveToAlbum = () => {
    myCanvas.canvasToTempFilePath({
      x: 0,
      y: 0,
      success: (res) => {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          quality: 1,
          success: () => {
            uni.showToast({ icon: 'success', title: '保存成功', duration: 3000 });
          },
        });
      },
    });
  };
  onMounted(() => {
    nextTick(() => {});
  });
</script>

<style lang="scss" scoped>
  .share-page {
    padding: 32rpx;
    font-size: 28rpx;
    &__content {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.7) 100%),
        #fefefe;
      border-radius: 20rpx;
      padding: 24rpx 40rpx;
      margin-bottom: 32rpx;

      &__banner {
        position: relative;
        &--text {
          opacity: 0.5;
          position: absolute;
          bottom: 0rpx;
          left: 72rpx;
          right: 72rpx;
        }
      }

      &--job-code {
        & > image {
          width: 112rpx;
          height: 112rpx;
          border: 2rpx solid rgba(62, 70, 84, 0.18);
          border-radius: 50%;
        }
      }

      &--class {
        display: flex;
        justify-content: space-between;
        .qr-code {
          width: 112rpx;
          height: 112rpx;
        }
      }
    }
  }
</style>
